<template>
  <div class="app-container">
    <el-form :inline="true" :model="filters" class="demo-form-inline filter-container">
      <el-form-item>
        <el-select v-model="filters.userType">
          <el-option
            :label="'全部'"
            :key="consts.ALL"
            :value="undefined"
          ></el-option>
          <el-option v-if="item.value != -1" v-for="item in consts.ACCOUNT_TYPE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="filters.userName" placeholder="输入账户名"/>
      </el-form-item>
      <el-form-item label="IP：">
        <el-input v-model="filters.ip"/>
      </el-form-item>

      <el-form-item label="登录时间：">
        <el-date-picker
          v-model="loginDate"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="来源：">
        <el-select v-model="filters.platform" filterable placeholder="请选择显示端">
          <el-option
            :label="'全部'"
            :key="consts.ALL"
            :value="undefined"
          ></el-option>
          <el-option v-if="item.value != -1" v-for="item in consts.DEVICE_TYPE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
    </el-form>

    <el-table :data="tableData.list" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="账户类型" align="center">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="账户名" align="center">
        <template slot-scope="{row}">
          {{row.userName}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="{row}">
          {{row.reallyName}}
        </template>
      </el-table-column>
      <el-table-column label="登录IP" align="center">
        <template slot-scope="{row}">
          {{row.ip}}
        </template>
      </el-table-column>
      <el-table-column label="IP归属地" align="center">
        <template slot-scope="{row}">
          {{row['geoip']['country']}} {{row['geoip']['region']}} {{row['geoip']['city']}}
        </template>
      </el-table-column>
      <el-table-column label="上次登录时间" align="center">
        <template slot-scope="{row}">
          {{row['@timestamp'] | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="来源" align="center">
        <template slot-scope="{row}">
          {{row.platform | toConverter('DEVICE_TYPE')}}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.limit"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {form, grid} from '@/build';

  import {
    riskUserLoginListApi as listApi,
  } from '@/services/api/risk';

  export default {
    name: 'user-login',

    mixins: [form, grid],

    data() {
      // 本周 即 当前周 周一至今
      const weekTime = [moment().startOf('isoWeek').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]

      return {
        tableData: {
          items: [],
          total: 0
        },
        filters: {
          userType: undefined,
          userName: this.username,
          ip: undefined,
          platform: undefined,
          stime: moment(weekTime[0]).valueOf(),
          etime: moment(weekTime[1]).valueOf(),        
        },
        loginDate: weekTime,
      }
    },
    created() {
      if (this.$route.query.userName) this.filters.userName = this.$route.query.userName
    },
    methods: {
      submitFilterForm() {
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(this.loginDate) && _.isArray(this.loginDate)) {
          stime = moment(this.loginDate[0]).valueOf();
          etime = moment(this.loginDate[1]).valueOf();
        }
        this.filters = {...this.filters, stime, etime}
        this.gridSearch()
      },
    },
    mounted() {
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.getAll();
    }
  }
</script>
